<template>
  <div class="app">
    <h1>当前计数为：{{ count }}</h1>
    <h1>双倍快乐: {{ count * 2 }}</h1>
    <button @click="increment">+</button>
    <p
      v-for="item in arr"
      :key="item"
    >
      {{ item }}
    </p>
  </div>
</template>
<script>
// reactive 把数据变成响应式一般用于处理对象或者是数组
// toRefs(多个)、toRef（单个） 把解构的数据重新变成响应式
// import { reactive, toRef, toRefs } from 'vue'
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    let data = reactive({
      count: 1,
      number: 2,
    })
    const { count } = toRefs(data)
    // const count = toRef(data, 'count')
    let arr = reactive([1, 2, 3, 4])
    const increment = () => {
      data.count += 1
    }

    return {
      arr,
      count,
      increment,
    }
  },
}
</script>
<style
  lang="scss"
  scoped
></style>
